<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>点评的星星评价效果</title>
    <link rel="stylesheet" type="text/css" href="normalize.css">
    <style>
        span img{
            width: 20px;
            height: 20px;
        }

    </style>
    <script src="jquery-2.1.4.min.js"></script>
    <script>

        //引入了jquery
        $(document).ready(function () {
            $(".pln-com-sta img").click(function (event) {
//点击当前的星星的时候，如果是选中的时候，
                if ($(this).attr("src") == "images/comment_icon.png") {
//把其src设置未选中的状态
                    $(this).attr("src", 'images/comment_gery_icon.png');
//把当前点击的元素，前面的元素全都变为选中的样式
                    $(this).prevAll().attr("src", 'images/comment_icon.png');
//把当前点击的元素，的后面元素全都变为灰色
                    $(this).nextAll().attr("src", 'images/comment_gery_icon.png');
                } else {
//点击当前的星星的时候，如果是未选中的样式，把其src设置选中的状态
                    $(this).attr("src", 'images/comment_icon.png');
//把当前点击的元素，前面的元素全都变为选中的样式
                    $(this).prevAll().attr("src", 'images/comment_icon.png');
//把当前点击的元素，前面的元素全都变为未选中的样式
                    $(this).nextAll().attr("src", 'images/comment_gery_icon.png');
                }
            });
        });
    </script>
</head>
<body>
<span class="pln-com-sta">服务评分:
    <img src="images/comment_gery_icon.png">
    <img src="images/comment_gery_icon.png">
    <img src="images/comment_gery_icon.png">
    <img src="images/comment_gery_icon.png">
    <img src="images/comment_gery_icon.png">
</span>

</body>
</html>